<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font: 19px Arial, Helvetica, sans-serif;
            color: #666;
        }

        .tab {
            width: 240px;
            margin: 50px;
        }

        .tab_menu {
            clear: both;
        }

        .tab_menu li {
            float: left;
            text-align: center;
            cursor: pointer;
            list-style: none;
            padding: 1px 6px;
            margin-right: 4px;
            background: #F1F1F1;
            border: 1px solid #898989;
            border-bottom: none;
        }

        .tab_menu li.hover {
            background: #DFDFDF;
        }

        .tab_menu li.selected {
            color: #FFF;
            background: #6D84B4;
        }

        .tab_box {
            clear: both;
            border: 1px solid #898989;
            width: 300px;
            height: 100px;
        }

        .hide {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">新闻</li>
            <li>财经</li>
            <li>视频</li>
        </ul>
    </div>
</div>
<div class="tab_box">
    <div>新闻信息</div>
    <div class="hide">财经信息</div>
    <div class="hide">视频信息</div>
</div>
<script>
    $(function () {
        let $div_li = $("div.tab_menu ul li");
        $div_li.click(function () {
            $(this).addClass("selected") // 当前<li>元素高度
                .siblings().removeClass("selected"); // 去掉其它同辈<li>元素的高度

            // 获取当前点击的<li>元素在全部li元素中的索引
            let index = $div_li.index(this);
            // 选取了节点。不选取子节点的话，会引起错误。如果里面还有div
            $("div.tab_box>div")
                .eq(index).show() // 显示<li>元素对应的<div>元素
                .siblings().hide(); // 隐藏其他几个同辈的<div>元素
        }).hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        })
    })
</script>
</body>
</html>